<template>
  <div class="dialog-container">
    <el-dialog
      :close-on-click-modal="false"
      :title="'审核'"
      :visible="dialogVisible"
      width="30%"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        label-width="110px"
        size="mini"
      >
        <el-row type="flex" justify="center">

          <el-col type="flex" justify="center">
            <el-form-item label="审核意见" prop="maintenanceStatus" type="flex" justify="center">
              <el-select
                v-model="dataForm.maintenanceStatus"
                @change="changeMaintenanceStatus"
              >
                <el-option
                  v-for="item in maintenanceStatuss"
                  :key="item.code"
                  :value="item.code"
                  :label="item.codeName"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col>
            <el-form-item id="operationContent" label="原因" prop="operationContent" style="display: none">
              <el-autocomplete

                v-model="dataForm.operationContent"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10}"
                style="width: 300px"
                @select="handleSelect"
              />

            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleCommit()">确定</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
import { getDict } from '@/utils/dict'
import { getTextPrompt } from '@/utils/common'
import { saveCheck } from '@/api/maintenanceManage'

export default {
  name: 'CheckMaintenanceDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'detail'
    },
    obj: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      saveLoading: false,
      dataForm: {
        maintenanceStatus: null,
        operationContent: null
      },
      maintenanceStatuss: [],
      restaurants: []
    }
  },
  created() {
    const maintenanceStatussTemp = getDict('e016')
    /*    this.maintenanceStatuss = getDict('e016')*/
    for (let i = 0; i < maintenanceStatussTemp.length; i++) {
      if (maintenanceStatussTemp[i].code !== 'e016_01' && maintenanceStatussTemp[i].code !== 'e016_02') {
        this.maintenanceStatuss.push(maintenanceStatussTemp[i])
      }
    }
    this.restaurants = getTextPrompt('e061_01')
  },
  methods: {
    handleSelect(item) {
      console.log(item)
    },
    querySearch(queryString, cb) {
      const restaurants = this.restaurants
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    initData() {
      this.dataForm.maintenanceStatus = 'e016_03'
      this.dataForm.operationContent = ''
      this.saveLoading = false
    },
    handleCommit() {
      this.saveLoading = true
      const data = []
      for (const argumentsKey in this.obj.ids) {
        data.push({ 'maintenanceId': this.obj.ids[argumentsKey],
          'operationContent': this.dataForm.operationContent,
          'maintenanceStatus': this.dataForm.maintenanceStatus
        })
      }
      saveCheck(data).then(() => {
        this.$message.success('成功')
        this.$emit('closeDialog')
        this.$emit('flushPage')
        this.saveLoading = false
      }).catch(() => {
        this.saveLoading = false
      })
    },
    closeDialog() {
      this.$emit('closeDialog')
      /*     this.clearData()*/
      this.$refs['form'].clearValidate()
    },
    changeMaintenanceStatus() {
      if (this.dataForm.maintenanceStatus === 'e016_03') { // 通过
        this.dataForm.operationContent = null
        document.getElementById('operationContent').style.display = 'none'
      } else { // 不通过 e016_04
        document.getElementById('operationContent').style.display = ''
      }
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
